<template>
   <view>
     <view class="search-box"> 
     <!-- 自定义组件 -->
     <my-search @click="gotoSearch"></my-search>
     </view>
     <!-- 轮播图 -->
     <swiper class="swiper" 	:indicator-dots="true" indicator-color="#000" 	indicator-active-color="#fff"  autoplay="true" interval="1000" 	circular="true">
       <swiper-item v-for="(val,index) in swiperList" :key="index">
        
         <navigator  class="swiperItem" :url="'/subpkg/goods-detail/goods-detail?goods_id='+val.goods_id" >
           <image class="swiperImg" :src="val.image_src"></image>
         </navigator>
       </swiper-item>
     </swiper>
     <!-- 分类导航区域 -->
      <view class="navList">
        <view class="navItem" @click="navClickHandler(item)" v-for="(item,i) in navList" :key="i">
          <image class="navImg" :src="item.image_src"></image> 
        </view>
     </view>
    
     <!-- 楼层 区域-->
     <view class="floor">
       <view class="floorItem" v-for="(val,i) in floorList" :key="i">
         <!-- 渲染楼层的标题 -->
         <image :src="val.floor_title.image_src" class="haderImg"></image>
         <view class="floor-img-box">
           <!-- 左侧图片 -->
             <navigator class="floorLeft" :url="val.product_list[0].url">
              <image :src="val.product_list[0].image_src"  :style="{width:val.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
             </navigator>
             <!-- 右侧图片 -->
             <view class="floorRight">
               <navigator class="rightItem" :url="it.url" v-for="(it,index) in val.product_list" :key="index" v-if="index!==0"> 
                <image class="floorRightImg" :src="it.image_src" :style="{width:it.image_width+'rpx'}" mode="widthFix"></image>
               </navigator>
               </view>
         </view>
       </view>
     </view>
   </view>
</template>

<script>
import mixins from "@/mixins/tabbar-badge.js"
  export default {
    mixins: [mixins],
    data() {
      return {
        swiperList:[],  //轮播图的数据列表
        navList:[] , //分类导航列表
        floorList:[] //楼层区域列表
      };
    },
    onLoad(){
      this.getSwiperList()
      this.getNavList()
      this.getFloorList()
    },
    methods:{
    //  获取轮播图的数据
    async  getSwiperList(){
      //发起请求
      const {data:res} =await uni.$http.get('/api/public/v1/home/swiperdata')
      // console.log(res)
      // 如果 res.meta.status的状态码不等于200
      if(res.meta.status !== 200) return  uni.$showMsg 
      // 赋值给 轮播图列表
      this.swiperList = res.message
    },
    // 获取 分类导航数据
   async getNavList() {
     //发请求
     const {data:res} = await uni.$http.get('/api/public/v1/home/catitems')
     // console.log(res)
     //判断 请求是否 发送 成功
     if(res.meta.status !== 200) return uni.$showMsg
     // 赋值给 分类导航列表
     this.navList = res.message
   },
   // 点击 分类导航
   navClickHandler(item){
     //如果点击的是 分类图标 
     if(item.name === '分类') {
         // console.log(uni.switchTab)
       uni.switchTab({
         url:'/pages/cate/cate'
       })
     }
   },
   // 获取  楼层区域的 数据
   async getFloorList() {
     // 发请求
      const {data:res} = await uni.$http.get('/api/public/v1/home/floordata')
      // console.log(res)
      // 判断请求 是否成功
      if(res.meta.status !==200) return uni.$showMsg
      
      // 自定义一个 url 地址
      res.message.forEach(floor=>{
        floor.product_list.forEach(shop =>{
          shop.url = '/subpkg/goods-list/goods-list?' + shop.navigator_url.split('?')[1]
        })
      })
      // 给 楼层列表赋值
      this.floorList = res.message
    }
   },
      // 点击搜索 跳转到 搜索页面
      gotoSearch() {
        uni.navigateTo({
           url:'/subpkg/search/search'
        })
      }
  }
</script>

<style lang="scss">
.swiper {
  height: 330rpx;
  .swiperItem ,
  .swiperImg {
    width: 100%;
    height: 100%;
  }
}
.navList {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;
    .navImg {
      width: 128rpx;
      height: 140rpx;
    }
}

.floorItem {
  .haderImg {
    height: 60rpx;
    width: 100%;
    display: flex;
  }
  .floor-img-box {
    display: flex;
    .floorRight {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
  }
}
.search-box {
  // 设置定位效果为“吸顶”
  position: sticky;
  // 吸顶的“位置”
  top: 0;
  // 提高层级，防止被轮播图覆盖
  z-index: 999;
}
</style>
